(function () {
    window.onload = function () {
        var banner = document.querySelector("#banner-wrap");
        var list = document.querySelector("#banner-wrap #banner-list");
        var rootWidth = -document.documentElement.clientWidth;
        var logo = document.getElementById("logo");
        var zhu = document.getElementById("zhu");
        var startX = 0;
        var index = 0;
        var translateX = 0;
        var tid = null;
        var lis = null;
        var points = null;
		
        init();
        autoPlay();
        var x,y,X,Y,moved ;
        banner.addEventListener('touchstart', function (ev) {
            ev.preventDefault();
			
            startX = ev.changedTouches[0].clientX;
            list.style.transition = "0s";
            clearInterval(tid);
            changeIndex();
            
            
            moved = false ;
            x = event.targetTouches[0].screenX ;
            y = event.targetTouches[0].screenY ;
        });
        banner.addEventListener('touchmove', function (ev) {
            var dis = ev.changedTouches[0].clientX - startX;
            translateX = -300 * index + dis;
            changePage(0, translateX);
            
            if(moved) return
            X = event.targetTouches[0].screenX ;
            Y = event.targetTouches[0].screenY ;
            if(X-x != 0 || Y-y !=0) moved = true
        });
        banner.addEventListener('touchend', function () {
            index = Math.round(translateX / -300);
            if (index < 0) {
                index = 0;
            } else if (index > lis.length - 1) {
                index = lis.length - 1;
                
                
            }
			if(index == 4 ||index == 1){
				zhu.style.display="block";
                zhu.classList.add("zhu-anima");
            }else{
            	zhu.classList.remove("zhu-anima");
            	zhu.classList.add("zhu-anima2");
            	setTimeout(function(){
            		zhu.style.display="none";
            		zhu.classList.remove("zhu-anima2");
            	},400)
            	
            }
            changePage(.3, -300 * index);
            changePoint();
            autoPlay();
            
            console.log("index",index);
            
            
            if(!moved) 
            {
            	console.log(1111);
                window.location.href="//app.appsflyer.com/com.pkaxyz.oxocn.erpkgo.ftipsk?pid=h5Test&c=2018102701";
            }
        });

        function autoPlay() {
            tid = setInterval(function () {
                changeIndex();
                changePage(0, -300 * index);

                setTimeout(function () {
                    index++;
                    changePage(.3, -300 * index);
                    changePoint();
            if(index == 4 ||index == 1){
				zhu.style.display="block";
                zhu.classList.add("zhu-anima");
            }else{
            	zhu.classList.remove("zhu-anima");
            	zhu.classList.add("zhu-anima2");
            	setTimeout(function(){
            		zhu.style.display="none";
            		zhu.classList.remove("zhu-anima2");
            	},400)
            }
                }, 500);

            }, 3000);
        }

        function changeIndex() {
            if (index == 0) {
                index = points.length;
            } else if (index == lis.length - 1) {
                index = points.length - 1;
            }
        }

        function changePoint() {
            for (var i = 0; i < points.length; i++) {
                points[i].classList.remove('active');
            }
            points[index % (points.length)].classList.add('active');
        }

        function changePage(duration, translateVal) {
            list.style.transition = duration + "s";
            list.style.transform = "translateX(" + translateVal + "px)";
        }

        function init() {
            list.innerHTML += list.innerHTML;

            lis = document.querySelectorAll("#banner-wrap>#banner-list li");
            list.style.width = lis.length + "00%";

            for (var i = 0; i < lis.length; i++) {
                lis[i].style.width = 100 / lis.length + "%";
            }

            var pointDiv = document.createElement("div");
            pointDiv.setAttribute("id", "point");
            for (var i = 0; i < lis.length / 2; i++) {
                var span = document.createElement("span");
                if (i == 0) {
                    span.classList.add('active');
                }
                pointDiv.appendChild(span);
            }
            banner.appendChild(pointDiv);
            points = document.querySelectorAll("#banner-wrap>#point span");
        }
    };
})();